<html xmlns:layout="http://www.thymeleaf.org/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org" th:remove="tag">
<div class="ui breadcrumb">
	<a href="#/dashboard" class="section">Dashboard</a>
	<i class="right angle icon divider"></i>
	<a class="section" href="#/admin">Administration</a>
	<i class="right angle icon divider"></i>
	<a class="section" href="#/admin/websites">Websites</a>
	<i class="right angle icon divider"></i>
	<div class="section active">{{original.name}}</div>
</div>
<div class="ui divider hidden"></div>
<div class="ui stackable grid">
	<div class="center aligned three wide column">
		<div class="ui divider hidden"></div>
		<i class="massive icons">
			<i class="disabled globe icon"></i><i class="corner check green icon" ng-show="original.status=='ENABLED'"></i><i class="corner remove orange icon"
		ng-show="original.status=='DISABLED'"></i><i class="corner trash red icon" ng-show="original.status=='PENDING_REMOVE'"></i>
		</i>
		<div class="ui divider hidden"></div>
		<div class="ui small statistic" ng-class="{green:website.status=='ENABLED',red:website.status=='PENDING_REMOVE',orange:website.status=='DISABLED'}">
			<div class="label">Status</div>
			<div class="value text" ng-switch="website.status">
				<span ng-switch-when="ENABLED">Enabled</span>
				<span ng-switch-when="DISABLED">Disabled</span>
				<span ng-switch-when="PENDING_REMOVE">Pending removal<br/>
						<br/>{{website.deleteRequestedAt+604800000|date:'longDate'}}
						<br/>{{website.deleteRequestedAt+604800000|date:'mediumTime'}}</span>
			</div>
		</div>
	</div>
	<div class="ten wide column">
		<h4 class="ui horizontal divider header "><i class="info circle icon"></i> Details</h4>
		<form class="ui form" novalidate="" ng-class="{loading:loading}" name="form">
			<div class="field required" ng-class="{error:form.name.$invalid &amp;&amp; form.name.$dirty}">
				<label>Name</label>
				<input type="text" name="name" placeholder="Name" ng-model="website.name" ng-disabled="viewMode" maxlength="100" ng-maxlength="100"
				required="" ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}" />
				<div class="ui red pointing label" ng-if="form.name.$invalid &amp;&amp; form.name.$dirty" ng-messages="form.name.$error">
					<span ng-message="required">Website name is required</span>
					<span ng-message="maxlength">Website name must be up to 100 characters long</span>
				</div>
			</div>
			<div class="field">
				<label>Description</label>
				<textarea ng-model="website.description" rows="3" ng-disabled="viewMode" maxlength="255"></textarea>
			</div>
			<div class="field" ng-hide="viewMode">
				<label>Hosts</label>
				<div class="ui right labeled left icon fluid input">
					<i class="globe icon"></i>
					<input type="text" name="host" placeholder="Host e.g. www.mysite.com" ng-model="hosts" ng-list="," />
					<a class="ui tag label" ng-click="addHosts(hosts);hosts=[]">Add Hosts</a>
				</div>
			</div>
			<div class="ui icon message">
				<i class="globe icon"></i>
				<div class="content">
					<div class="header">Website hosts ({{website.hosts.length}})</div>
					<div class="ui list">
						<div class="item" ng-repeat="host in website.hosts">
							<i class="remove red icon link" ng-click="removeHost($index)" ng-hide="viewMode"></i>
							<i class="globe icon" ng-show="viewMode"></i>
							<div class="content">{{host}}</div>
						</div>
					</div>
				</div>
			</div>
			<button class="ui button" ng-show="viewMode" ng-click="setViewMode(false)" ng-if="website.status!='PENDING_REMOVE'">Edit</button>
			<div class="ui buttons" ng-show="!viewMode">
				<button class="ui button" ng-click="setViewMode(true)">Cancel</button>
				<div class="or"></div>
				<button class="ui positive button" ng-click="save()" ng-disabled="form.$invalid || form.$pending">Save</button>
			</div>
			<button ng-if="website.status!='PENDING_REMOVE'" class="ui negative button right floated" ng-click="remove()"><i class="trash outline icon"></i>Delete website</button>
			<button ng-if="website.status=='PENDING_REMOVE'" class="ui positive button right floated" ng-click="restore()"><i class="check icon"></i>Restore website</button>
			<button ng-if="website.status=='DISABLED'" class="ui positive button right floated" ng-click="enable()"><i class="check icon"></i>Enable website</button>
			<button ng-if="website.status=='ENABLED'" class="ui orange button right floated" ng-click="disable()"><i class="remove icon"></i>Disable website</button>
		</form>
	</div>
	<div class="three wide column">
		<h4 class="ui horizontal divider header "><i class="bar chart icon"></i></h4>
		<div class="ui one small statistics">
			<div class="statistic">
				<div class="value">
					<i class="file text outline icon"></i> 0
				</div>
				<div class="label">
					Posts
				</div>
			</div>
			<div class="small statistic">
				<div class="value">
					<i class="users icon"></i> 0
				</div>
				<div class="label">
					Users
				</div>
			</div>
			<div class="statistic" ng-if="website.updatedAt">
				<div class="text value">{{website.updatedAt|date:'longDate'}}
					<br/>{{website.updatedAt|date:'mediumTime'}}</div>
				<div class="label">Last Updated</div>
			</div>
			<div class="statistic" ng-if="website.createdAt">
				<div class="text value">{{website.createdAt|date:'longDate'}}
					<br/>{{website.createdAt|date:'shortTime'}}</div>
				<div class="label">Created</div>
			</div>
		</div>
	</div>
</div>
<div class="ui small basic modal confirm">
	<div class="ui icon header" ng-switch="action">
		<i class="globe icon"></i> Delete websiet "{{website.name}}"
	</div>
	<div class="content">
		<p>When you click <strong>Delete website</strong>:</p>
		<ul>
			<li>All trafic to the website will be halted.</li>
			<li>Any project owner may undo the deletion at any time within 7 days.</li>
		</ul>
		<div class="ui divider hidden"></div>
		<p>After the 7-day waiting period:</p>
		<ul>
			<li>The website will be deleted, including all pages, redirects and other website related information.</li>
			<li>You <em>will not</em> be able to restore the website.</li>
		</ul>
		<div class="ui divider hidden"></div>
		<form class="ui inverted form" novalidate="" ng-class="{loading:loading}">
			<div class="field">
				<label>To delete website "{{website.name}}", type your website ID: {{website.id}}</label>
				<input type="text" name="name" placeholder="Website ID" ng-model="websiteId" />
			</div>
		</form>
	</div>
	<div class="actions">
		<button class="ui red basic inverted button ok" ng-disabled="websiteId!=website.id">
			<i class="checkmark icon"></i> Delete website
		</button>
		<div class="ui basic inverted button cancel">
			<i class="remove icon"></i> Cancel
		</div>
	</div>
</div>
<div class="ui small basic modal disable">
	<div class="ui icon header" ng-switch="action">
		<i class="globe icon"></i> Disable websiet "{{website.name}}"
	</div>
	<div class="content">
		<p>When you click <strong>Disable website</strong>:</p>
		<ul>
			<li>All trafic to the website will be halted.</li>
			<li>Any project owner may enable the website at any time.</li>
		</ul>
	</div>
	<div class="actions">
		<button class="ui red basic inverted button ok">
			<i class="checkmark icon"></i> Disable website
		</button>
		<div class="ui basic inverted button cancel">
			<i class="remove icon"></i> Cancel
		</div>
	</div>
</div>

</html>